<!-- AI金字塔 -->
<template>
	<view class="content">
		<u-form :model="form" ref="uForm">

			<!-- 通用头部 start -->
			<view class="form-line">

				<u-form-item label-width="130rpx">
					<u-input v-model="form.market" type="select" @click="showMarket = true" placeholder="选择市场"
						:custom-style="inputStyle" />
				</u-form-item>

				<u-form-item label-width="130rpx">
					<u-input v-model="form.coin" type="select" @click="showcoin = true" placeholder="选择币种"
						:custom-style="inputStyle" />
				</u-form-item>
			</view>

			<view class="form-line">
				<u-form-item label-width="130rpx">
					<u-input v-model="form.initialFund" placeholder="初始资金" :custom-style="inputStyle" />
					<!-- <effect-input v-model="form.initialFund" type="nariko" label="初始资金"></effect-input> -->
				</u-form-item>
				<u-form-item label-width="130rpx">
					<u-input v-model="form.maxPosition" placeholder="首开数量" :custom-style="inputStyle" />
				</u-form-item>


			</view>
			<!-- 通用头部 end -->
			<view class="form-line">
				<!-- <u-form-item label-width="130rpx">
					<u-input v-model="form.leverage" type="select" @click="showleverage = true" placeholder="杠杆倍数"
						:custom-style="inputStyle" />
				</u-form-item> -->
				<view class="slide">
					<u-slider v-model="slideValue" :use-slot="true" min="25" max="100" step="25">
						<!-- 这里外面需要多一层view，否则".badge-button"样式可能不生效 -->
						<view class="">
							<view class="badge-button">
								{{slideValue/5}}倍
							</view>
						</view>
					</u-slider>
				</view>
				<view class="right subsection">
					<u-subsection :list="list" mode="subsection" :current="current" @change="subsectionChange"
						active-color="#ff9900"></u-subsection>
				</view>
			</view>



			<view class="form-line">

				<u-form-item label-width="130rpx">
					<u-input v-model="form.maxPosition" placeholder="最大补仓" :custom-style="inputStyle" />
				</u-form-item>
				<u-form-item label-width="130rpx">
					<u-input v-model="form.maxPosition" placeholder="平仓利润间距" :custom-style="inputStyle" />
				</u-form-item>
			</view>

			<!-- 开仓参数 start只按比例 -->
			<view class="form-line">
				<view>
					<u-form-item label-width="130rpx">
						<u-input v-model="form.maxPosition" placeholder="阶梯一间隔" :custom-style="inputStyle" />
					</u-form-item>
					<u-form-item label-width="130rpx">
						<u-input v-model="form.maxPosition" placeholder="阶梯二间隔" :custom-style="inputStyle" />
					</u-form-item>
					<u-form-item label-width="130rpx">
						<u-input v-model="form.maxPosition" placeholder="阶梯三间隔" :custom-style="inputStyle" />
					</u-form-item>
				</view>
				<view>
					<u-form-item label-width="130rpx">
						<u-input v-model="form.maxPosition" placeholder="数量" :custom-style="inputStyle" />
					</u-form-item>
					<u-form-item label-width="130rpx">
						<u-input v-model="form.maxPosition" placeholder="数量" :custom-style="inputStyle" />
					</u-form-item>
					<u-form-item label-width="130rpx">
						<u-input v-model="form.maxPosition" placeholder="数量" :custom-style="inputStyle" />
					</u-form-item>
				</view>
			</view>
			<!-- 开仓参数 end-->
			<view class="form-line">
				<u-form-item label-width="130rpx" :label-style="style">
					<u-input v-model="form.rangeOn" placeholder="区间上沿" :custom-style="inputStyle" />
				</u-form-item>
				<u-form-item label-width="130rpx">
					<u-input v-model="form.rangeUp" placeholder="区间下沿" :custom-style="inputStyle" />
				</u-form-item>
			</view>

			<view class="form-line">
				<!-- <u-form-item label-width="130rpx">
					<u-input v-model="form.leverage" type="select" @click="showleverage = true" placeholder="杠杆倍数"
						:custom-style="inputStyle" />
				</u-form-item> -->
				<!-- <u-form-item label-width="130rpx">
					<u-input v-model="form.maxPosition" placeholder="价格精度" :custom-style="inputStyle" />
				</u-form-item> -->

			</view>

			<view class="form-line">

				<!-- <u-form-item label-width="130rpx">
					<u-input v-model="form.closeHoldTime" type="select" @click="showcloseHoldTime = true"
						placeholder="全部平仓再次挂单时间" :custom-style="inputStyle" />
				</u-form-item> -->
			</view>

			<!-- 风险 start-->
			<view class="form-line">
				<view class="safe">
					<text>熔断保护</text>
					<u-switch v-model="checked"></u-switch>
				</view>
				<view class="safe">
					<text>AI趋势指标</text>
					<u-switch v-model="checked"></u-switch>
				</view>
			</view>
			<view class="form-line">
				<view class="safe">
					<text>错峰等待</text>
					<u-switch v-model="checked"></u-switch>
				</view>
				<u-form-item>
					<u-input v-model="form.rangeUp" placeholder="回撤比例" :custom-style="inputStyle" />
				</u-form-item>
			</view>
			<view class="form-line">
				<view class="safe">
					<text>追踪止盈</text>
					<u-switch v-model="checked"></u-switch>
				</view>
				<u-form-item label-width="130rpx">
					<u-input v-model="form.rangeUp" placeholder="回撤比例" :custom-style="inputStyle" />
				</u-form-item>
				
				<!-- <view class="safe">
					<text>AI趋势指标</text>
					<u-switch v-model="checked"></u-switch>
				</view> -->
			</view>
			<!-- 风险 end -->
		</u-form>
		<view class="u-btn">
			<u-button type="primary" size="large" :ripple="true" shape="circle">创建策略</u-button>
		</view>
		<u-action-sheet :list="marketList" v-model="showMarket" @click="marketCallback"></u-action-sheet>
		<u-action-sheet :list="coinList" v-model="showcoin" @click="coinCallback"></u-action-sheet>
		<u-action-sheet :list="leverageList" v-model="showleverage" @click="leverageCallback"></u-action-sheet>
		<u-action-sheet :list="closeHoldTimeList" v-model="showcloseHoldTime" @click="closeHoldTimeCallback">
		</u-action-sheet>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				slideValue: 25,
				// 分段器
				list: [{
						name: '做多'
					},
					{
						name: '做空'
					}
				],
				current: 0,
				// INPUT
				inputStyle: {
					color: "aliceblue",
				},
				style: {
					color: "red",
				},
				form: {
					market: "",
					coin: "",
					initialFund: "",
					leverage: "",
					contractType: "",
					openNum: "",
					openSpace: "",
					closeSpace: "",
					rangeOn: "",
					rangeUp: "",
					maxPosition: "",
					// 回撤比例
					retracementProportion: "",
				},
				showMarket: false,
				marketList: [{
					text: "Huobi交割"
				}, {
					text: "Huobi永续币本位"
				}],
				showcoin: false,
				coinList: [{
					text: "BTC"
				}, {
					text: "ETH"
				}],
				showcloseHoldTime: false,
				closeHoldTimeList: [{
					text: "1"
				}, {
					text: "10"
				}],
				// 杠杆
				showleverage: false,
				leverageList: [{
					text: "3"
				}, {
					text: "5"
				}],
				// 开仓 平仓
				openSet: [{
					name: "按比例"
				}, {
					name: "按数值"
				}],
				closeSet: [{
					name: "按比例"
				}, {
					name: "按数值"
				}],
				riskControl: [{
						name: "套单释放",
						checked: true,
						disabled: false,
					},
					{
						name: "AI趋势指标",
						checked: true,
						disabled: false,
					},
					{
						name: "追踪止盈",
						checked: true,
						disabled: false,
					},
				],

				marketArray: ["火币", "比特币"],
				market: "",
				coinArray: ["BTC", "ETH"],
				coin: "",
				leverageArray: ["1", "2", "10"],
				leverage: "",
				orderTimeArray: ["1", "3"],
				orderTime: "",
				contractType: [{
						name: "做多",
					},
					{
						name: "做空",
					},
				],
				// 平仓参数设置
				// 价格间隔
				strikeIntervals: [{
						name: "比例",
					},
					{
						name: "数值",
					},
				],

				// 保护设置
				rangeOn: "100",
				checked: true,
			};
		},

		components: {},

		computed: {},

		mounted() {},

		methods: {
			closeHoldTimeCallback(index) {
				this.form.closeHoldTime = this.closeHoldTimeList[index].text;
			},
			leverageCallback(index) {
				this.form.leverage = this.leverageList[index].text;
			},
			// 选中某个复选框时，由checkbox时触发
			checkboxChange(e) {
				//console.log(e);
			},
			// 选中任一checkbox时，由checkbox-group触发
			checkboxGroupChange(e) {
				console.log(e);
			},

			leverageChange(e) {
				this.leverage = this.leverageArray[e.detail.value];
			},
			orderTimeChange(e) {
				this.orderTime = this.orderTimeArray[e.detail.value];
			},
			// 首页通用 做多 做空
			coinCallback(index) {
				this.form.coin = this.coinList[index].text;
			},
			marketCallback(index) {
				this.form.market = this.marketList[index].text;
			},
			subsectionChange(index) {
				this.current = index;
			}
		}
	}
</script>
<style lang='scss' scoped>
	@import '@/styles/quant-form.scss';
</style>
